import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import './index.css'
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root, { loader as rootLoader, action as rootAction } from './routes/Root';
import ErrorPage from './routes/Error';
import Contact, { loader as contactLoader, action as contactAction } from './routes/Contact';
import EditContact, { action as editAction } from './routes/Edit';
import { action as destroyAction } from './routes/Destory'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        errorElement: <ErrorPage />,
        children: [{
          path: 'contacts/:contactId',
          element: <Contact />,
          loader: contactLoader,
          action: contactAction
        }, {
          path: 'contacts/:contactId/edit',
          element: <EditContact />,
          loader: contactLoader,
          action: editAction
        }, {
          path: 'contacts/:contactId/destroy',
          action: destroyAction,
        }]
      }

    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
